<template>
	<view class="home">
		<view class="wx_nav">
			<!-- #ifndef APP -->
			<view class="iconfont icon-sousuo"></view>
			<text class="nav_name">百年奥莱</text>
			<view class="iconfont icon-xiaoxizhongxin"></view>
			<!-- #endif -->
		</view>
		<IndexSwiper :dataList="swiperList"></IndexSwiper>
		<!-- 		<Recommend></Recommend>
		<Card cardTitle="猜你喜欢"></Card>
		<CommodityList></CommodityList>
		<Card cardTitle="商品店铺"></Card>
		<Card cardTitle="运动户外"></Card>
		<Card cardTitle="1234"></Card>
		<Banner></Banner> -->
		<Icons :dataicons="iconData"></Icons>
		<Card cardTitle="家电"></Card>
		<Shop :dataList="miTvList"></Shop>
		<Card cardTitle="手机"></Card>
		<Shop :dataList="phoneList"></Shop>
	</view>
</template>

<script scoped>
	import { mapActions } from "vuex";
	import { mapGetters } from "vuex";
	import IndexSwiper from '@/components/indexswiper.vue'
	import Recommend from '@/components/recommend.vue'
	import Card from '@/components/card.vue'
	import CommodityList from '@/components/commoditylist.vue'
	import Banner from '@/components/banner.vue'
	import Icons from '@/components/icons.vue'
	import Hotgoods from '@/components/hotgoods.vue'
	import Shop from '@/components/shop.vue'
	export default {
		data() {
			return {
				swiperList: [],
				categoryList: "", //分类列表
				categoryID: [], // 分类id
				phoneList: [], //手机列表
				selectitem: 0,
				miTvList: [],
				iconData: [{
						id: 1,
						imgUrl: require('../../static/icons/icon1.png'),
						name: '健身'
					},
					{
						id: 2,
						imgUrl: require('static/icons/icon2.png'),
						name: '包包'
					},
					{
						id: 3,
						imgUrl: require('static/icons/icon3.png'),
						name: '极限'
					},
					{
						id: 4,
						imgUrl: require('static/icons/icon4.png'),
						name: '运动'
					},
					{
						id: 5,
						imgUrl: require('static/icons/icon5.png'),
						name: '服装'
					},
					{
						id: 6,
						imgUrl: require('static/icons/icon6.png'),
						name: '饮品'
					},
					{
						id: 7,
						imgUrl: require('static/icons/icon7.png'),
						name: '装饰'
					},
					{
						id: 8,
						imgUrl: require('static/icons/icon8.png'),
						name: '旅行'
					}
				]
			}
		},
		components: {
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hotgoods,
			Shop
		},
		onLoad() {
			this.getswiper(),
				this.getPromo("手机", "phoneList"),
				this.getPromo("电视机", "miTvList"),
				this.getPromo(
					["电视机", "空调", "洗衣机"],
					"applianceList",
					"/product/getHotProduct"
			 );
		},
		onShow() {
		},
		onLaunch() {
			// #ifdef MP-WEIXIN
			this.$nextTick(function(){
				this.toserve();
			})
			// #endif
		},
		methods: {
			...mapActions(["setShoppingCart", "setUser"]),
			getswiper() {
				this.$request.post("/resources/carousel", {}).then(res => {
					// 打印调用成功回调
					// console.log(res.data.carousel)
					this.swiperList = res.data.carousel;
				})
			},
			getPromo(categoryName, val, api) {
				api = api != undefined ? api : "/product/getPromoProduct";
				this.$request
					.post(api, {
						categoryName
					})
					.then(res => {
						// console.log(res.data.Product)
						this[val] = res.data.Product;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			toserve() {


				this.$request
					.post("/users/login", {
						userName: this.$store.getters.getUser.userName,
						password: this.$store.getters.getUser.password
					})
					.then(res => {
						console.log(res)
						uni.showToast({
							title: "欢迎回来！",
							duration: 1000
						});
						 this.getCar()
					})

			},
			getCar() {
				this.$request
					.post("/user/shoppingCart/getShoppingCart", {
						user_id: this.$store.getters.getUser.user_id
					}).then(res => {
						console.log(res)
						if (res.data.code === "001") {
							// 001 为成功, 更新vuex购物车状态
							this.setShoppingCart(res.data.shoppingCartData);
						} else {
							// 提示失败信息
							uni.showToast({
								title: res.data.msg,
								duration: 1000
							})
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			}


		},
		computed: {
			...mapGetters(["getUser", "getNum"])
		}
	}
</script>

<style>
	.icon-sousuo {
		padding-left: 6rpx;
	}

	.scroll_content {
		width: 100%;
		height: 70rpx;
		white-space: nowrap;
	}

	.scroll_item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}

	/* #ifndef MP-WEIXIN */
	.wx_nav {
		height: 100rpx;
		line-height: 100rpx;
	}

	/* #endif */
	.wx_nav {
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 99999;
		background-color: white;
	}

	/* #ifdef MP-WEIXIN */
	.wx_nav {
		height: 130rpx;
		line-height: 130rpx;
	}

	.nav_name,
	.icon-sousuo {
		transform: translateY(14%);
	}

	.icon-xiaoxizhongxin {
		visibility: hidden;
	}

	/* #endif */
</style>
